<%--
  Created by IntelliJ IDEA.
  User: A415
  Date: 2024/6/14
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
        body{
            display:flex;
            justify-content:center;
            align-items:center;
            height:100vh;
            background:linear-gradient(to right,cyan,purple)
        }
        a.layui-btn{
            color:white;
        }

    </style>
    <link href="${pageContext.request.contextPath}/frontend/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="on" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即登录</button>
            <a  class="layui-btn layui-btn-primary" href="${pageContext.request.contextPath}/UserServlet136/reg">注册</a>
        </div>
    </div>
</form>
<!---layui核心js文件-->
<script src="${pageContext.request.contextPath}/frontend/layui/layui.js"></script>
<!--发起异步提交的js插件-->
<script src="${pageContext.request.contextPath}/frontend/layui/axios.min.js"></script>

<script>
    layui.use(['form', 'laydate', 'util'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        // 绑定事件
        //
        form.on('submit(demo1)', function(data){
                console.log(data.field); // 打印表单的字段
                // 执行相关的提交操作
                if(data.field.username == ""){
                    layer.alert("请输入用户名");
                    return false;
                }
                if(data.field.password == "") {
                    layer.alert("请输入密码");
                    return false;
                }
                //手动添加服务端判断异步请求的标志
               axios.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
                axios.post(
                    '${pageContext.request.contextPath}/UserServlet136/login',
                    data.field
                )
                .then(function (response) {
                    // 请求成功时处理响应数据
                    //根据服务端返回的数据做处理

                    //如果登陆成功，跳转到首页
                    if(response.data.code == 200){
                        layer.alert(response.data.message,function (){
                            window.location.href = "${pageContext.request.contextPath}/IndexServlet001";
                        })
                    }else{
                        layer.alert(response.data.message)
                    }
                    console.log(response.data);
                })
                .catch(function (error) {
                    // 请求失败时处理错误
                    console.error(error);
                });
            return false; // 阻止表单默认提交行为
        });

    });

</script>

</body>
</html>
